<template>
  <div class="content">
    <!-- <div class="divider">检查内容:</div> -->

    <el-table
      :data="checkContentData"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column prop="content" label="检查内容"></el-table-column>
      <el-table-column prop="requests" label="标准要求"></el-table-column>
      <el-table-column label="检查方法" prop="insMethod">
        <template #default="{ row }">
          <el-input disabled v-model="row.insMethod"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="检查小结" prop="insSummary">
        <template #default="{ row }">
          <el-input disabled v-model="row.insSummary"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否合格" width="180">
        <template #default="{ row }">
          <el-radio-group v-model="row.isQualifiedCheck">
            <el-radio disabled label="1">合格</el-radio>
            <el-radio disabled label="0">不合格</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="附件">
        <template #default="{ row }">
          <!-- class="upload-demo" -->
          <div v-for="item in row.insContentAttachmentArr" :key="item?.uuidFile">
            <div class="file-item">
              <div
                class="file-item--left"
                :title="item.fileName"
                @click.prevent="handleDownload(item)"
              >
                <i class="el-icon-folder"></i>
                {{ item?.fileName }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="inspectTime" label="检查时间"></el-table-column>
      <el-table-column prop="recOpinions" label="整改记录">
        <template #default="{ row }">
          <div v-if="row.recRecordList.length">
            <el-button type="text" @click="handleLook(row)">查看详情</el-button>
          </div>
          <div v-else>无</div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="整改详情" v-model="dialogVisible" destroy-on-close width="840px">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="inspectTime" label="检查时间"></el-table-column>
        <el-table-column label="检查方法" prop="insMethod"></el-table-column>
        <el-table-column prop="insSummary" label="检查小结"></el-table-column>
        <el-table-column prop="isQualifiedRec" label="是否合格">
          <template #default="{ row }">
            <el-radio-group v-model="row.isQualifiedRec">
              <el-radio disabled label="1">合格</el-radio>
              <el-radio disabled label="0">不合格</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>

        <el-table-column label="附件">
          <template #default="{ row }">
            <div v-for="item in JSON.parse(row.insContentAttachment)" :key="item?.uuidFile">
              <div class="file-item">
                <div
                  class="file-item--left"
                  :title="item.fileName"
                  @click.prevent="handleDownload(item)"
                >
                  <i class="el-icon-folder"></i>
                  {{ item?.fileName }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="recOpinions" label="整改意见"></el-table-column>
        <el-table-column prop="recFeedbackDesc" label="整改反馈"></el-table-column>
        <el-table-column label="整改反馈附件">
          <template #default="{ row }">
            <div v-for="item in JSON.parse(row.recFeedbackAttachment)" :key="item?.uuidFile">
              <div class="file-item">
                <div
                  class="file-item--left"
                  :title="item.fileName"
                  @click.prevent="handleDownload(item)"
                >
                  <i class="el-icon-folder"></i>
                  {{ item?.fileName }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rectificationTime" label="整改时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref } from "vue";
import { download } from "/@/utils/download";

defineProps({
  checkContentData: {
    type: Array,
    require: true,
    default: () => []
  }
});

let dialogVisible = ref(false);
let tableData = ref([]);

const handleLook = row => {
  dialogVisible.value = true;
  tableData.value = row.recRecordList;
  console.log();
};

const handleDownload = item => {
  if (!item) return;
  download(item);
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  margin-bottom: 20px;
}
.divider {
  margin-bottom: 10px;
  border-left: 3px solid #409eff;
  text-indent: 8px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  &--left {
    flex: 1;
    margin-right: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .el-icon-folder {
      margin-right: 5px;
    }
    &:hover {
      cursor: pointer;
      color: #409eff;
    }
  }
  &--right {
    font-size: 10px;
    width: 40px;
    text-align: center;
    color: red;
  }
}
</style>
